<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="title">{{ isEdit ? '编辑数据' : '添加数据' }}</view>
		</view>
		
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 基础环境参数 -->
			<view class="form-section">
				<text class="section-title">基础环境参数</text>
				<view class="form-item">
					<text class="label">环境温度 (°C):</text>
					<input class="input" v-model="formData.temperature" type="digit" placeholder="请输入环境温度" />
				</view>
				<view class="form-item">
					<text class="label">空气湿度 (%):</text>
					<input class="input" v-model="formData.humidity" type="digit" placeholder="请输入空气湿度" />
				</view>
			</view>
			
			<!-- 土壤与水分参数 -->
			<view class="form-section">
				<text class="section-title">土壤与水分参数</text>
				<view class="form-item">
					<text class="label">co2值:</text>
					<input class="input" v-model="formData.ph" type="digit" placeholder="请输入co2值" />
				</view>
				<view class="form-item">
					<text class="label">土壤湿度 (%):</text>
					<input class="input" v-model="formData.soil" type="digit" placeholder="请输入土壤湿度" />
				</view>
				<view class="form-item">
					<text class="label">降雨量 (mm):</text>
					<input class="input" v-model="formData.rain" type="digit" placeholder="请输入降雨量" />
				</view>
			</view>
			
			<!-- 光照参数 -->
			<view class="form-section">
				<text class="section-title">光照参数</text>
				<view class="form-item">
					<text class="label">紫外线强度:</text>
					<input class="input" v-model="formData.uv" type="digit" placeholder="请输入紫外线强度" />
				</view>
				<view class="form-item">
					<text class="label">光照强度 (lux):</text>
					<input class="input" v-model="formData.light" type="digit" placeholder="请输入光照强度" />
				</view>
			</view>
			
			<!-- 设备信息 -->
			<view class="form-section">
				<text class="section-title">设备信息</text>
				<view class="form-item">
					<text class="label">设备节点ID:</text>
					<input class="input" v-model="formData.node_id" type="number" placeholder="请输入设备节点ID" />
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<button class="cancel-btn" @click="goBack">取消</button>
			<button class="confirm-btn" @click="saveData">{{ isEdit ? '更新' : '添加' }}</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isEdit: false,
			currentEditId: null,
			formData: {
				temperature: '',
				humidity: '',
				ph: '',
				uv: '',
				soil: '',
				rain: '',
				light: '',
				node_id: ''
			}
		}
	},
	onLoad(options) {
		// 检查是否是编辑模式
		if (options.id) {
			this.isEdit = true;
			this.currentEditId = options.id;
			this.loadEditData(options);
		}
	},
	methods: {
		// 加载编辑数据
		loadEditData(options) {
			this.formData = {
				temperature: options.temperature || '',
				humidity: options.humidity || '',
				ph: options.ph || '',
				uv: options.uv || '',
				soil: options.soil || '',
				rain: options.rain || '',
				light: options.light || '',
				node_id: options.node_id || ''
			};
		},
		
		// 验证表单
		validateForm() {
			const fields = [
				{ key: 'temperature', name: '环境温度' },
				{ key: 'humidity', name: '空气湿度' },
				{ key: 'ph', name: 'co2值' },
				{ key: 'uv', name: '紫外线强度' },
				{ key: 'soil', name: '土壤湿度' },
				{ key: 'rain', name: '降雨量' },
				{ key: 'light', name: '光照强度' }
			];
			
			for (let field of fields) {
				if (!this.formData[field.key] || this.formData[field.key] === '') {
					uni.showToast({
						title: `请输入${field.name}`,
						icon: 'none'
					});
					return false;
				}
				
				const value = parseFloat(this.formData[field.key]);
				if (isNaN(value)) {
					uni.showToast({
						title: `${field.name}必须是数字`,
						icon: 'none'
					});
					return false;
				}
			}
			
			return true;
		},
		
		// 保存数据
		async saveData() {
			// 验证表单
			if (!this.validateForm()) {
				return;
			}
			
			try {
				uni.showLoading({ title: this.isEdit ? '更新中...' : '添加中...' });
				
				const data = {
					temperature: parseFloat(this.formData.temperature),
					humidity: parseFloat(this.formData.humidity),
					ph: parseFloat(this.formData.ph),
					uv: parseFloat(this.formData.uv),
					soil: parseFloat(this.formData.soil),
					rain: parseFloat(this.formData.rain),
					light: parseFloat(this.formData.light),
					timestamp: Date.now()
				};
				
				let result;
				if (this.isEdit) {
					// 更新数据
					result = await uniCloud.callFunction({
						name: 'updateData',
						data: {
							id: this.currentEditId,
							updateData: data
						}
					});
				} else {
					// 添加数据
					result = await uniCloud.callFunction({
						name: 'addData',
						data: data
					});
				}
				
				uni.hideLoading();
				
				if (result.result.code === 0) {
					uni.showToast({
						title: this.isEdit ? '更新成功' : '添加成功',
						icon: 'success'
					});
					
					// 延迟返回，让用户看到成功提示
					setTimeout(() => {
						this.goBack();
					}, 1500);
				} else {
					uni.showToast({
						title: result.result.message || '操作失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('保存数据失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx 30rpx;
	color: white;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
}

.form-container {
	flex: 1;
	padding: 30rpx;
}

.form-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
	border-bottom: 3rpx solid #667eea;
	padding-bottom: 15rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
	letter-spacing: 1rpx;
	display: block;
	margin-bottom: 15rpx;
	line-height: 1.5;
}

.input {
	width: 100%;
	padding: 20rpx 16rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 28rpx;
	background: white;
	transition: all 0.3s ease;
	color: #333;
	font-weight: 400;
	box-sizing: border-box;
	height: 80rpx;
	line-height: 1.4;
}

.input:focus {
	border-color: #667eea;
	background: white;
	box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	outline: none;
}

.input::placeholder {
	color: #999;
	font-size: 26rpx;
}

.footer {
	padding: 30rpx;
	background: white;
	border-top: 1rpx solid #eee;
	display: flex;
	gap: 20rpx;
}

.cancel-btn, .confirm-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #f5f5f5;
	color: #666;
}

.cancel-btn:active {
	background: #e0e0e0;
	transform: scale(0.98);
}

.confirm-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
}

.confirm-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
}
</style>